<template>
	<view class="flex-col justify-start page">
		<!-- <u-navbar title="设备列表" bgColor="rgba(0,0,0,0)" :autoBack="true" :placeholder="true">
		</u-navbar> -->
		<view class="flex-col justify-start items-center section_3 ">
			<view class="flex-col section_4">
				 <u-count-down
				        :time="timestamp"
				        format="DD:HH:mm:ss"
				        autoStart
				        millisecond
				        @change="onChange"
				    >
				        <view class="time">
							<text class="font_3 text_3">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;</text>
							<text class="font_3 text_6">:</text>
							<text class="font_3 text_4">{{ timeData.minutes>10?timeData.minutes: '0'+timeData.minutes }}&nbsp;</text>
				        </view>
				    </u-count-down>
				<text class="self-center text_7 mt-29-5">剩余时间</text>
			</view>
		</view>

		<view class="flex-row status-list">
			<view class="flex-col status-list-item items-center" v-for="(item,index) in statusList" :class="currentStatus == index ? 'section_5' : ''">
				<view class="flex-col justify-center items-center image-wrapper" v-if="currentStatus != index">
					<image class="image_9" mode="heightFix" :src="item.icon" />
				</view>
				<image class="image_6" mode="heightFix" :src="item.selectIcon" v-else/>
				<text class="font_5" v-if="currentStatus != index">{{item.text}}</text>
				<text class="font_4 text_8 mt-11" v-if="currentStatus == index">{{item.text}}</text>
			</view>
		</view>
		<view class="flex-col section_6">
			<text class="self-start text_9">设备信息</text>
			<view class="flex-row equal-division mt-17">
				<view class="flex-col section_7 equal-division-item">
					<text class="self-start font_6">温度</text>
					<view class="mt-16 flex-row justify-end items-center">
						<text class="font">{{wendu}}</text>
						<image class="image_10"
							src="https://ide.code.fun/api/image?token=664daf63602bd2001262c54d&name=3727dac5c18ee093ba7041195bb0e0bc.png" />
					</view>
				</view>
				<view class="flex-col section_7 equal-division-item ml-9-5">
					<text class="self-start font_6">使用次数</text>
					<view class="mt-16 flex-row justify-end items-center">
						<text class="font">{{useNum}}</text>
						<text class="font_4 text_10">次</text>
					</view>
				</view>
				<view class="flex-col section_7 equal-division-item ml-9-5">
					<text class="self-start font_6">电流</text>
					<view class="mt-16 flex-row justify-end items-center">
						<text class="font">{{mANum}}</text>
						<text class="font_2 text_11 ml-1-5">A</text>
					</view>
				</view>
			</view>
			<view class="flex-col self-stretch group mt-17">
				<view v-if="diwenShow" class="flex-row justify-center items-center button">
					<image class="image_11"
						src="https://shops.cg500.com/static/aijiu/warning-icon-white.png" />
					<text class="font_5 text_12 ml-4-5">低温报警</text>
				</view>
				<view class="flex-col justify-start items-center button_2 mt-12-5" @click="toHome">
					<text class="font_2 text_13">更多艾灸小知识</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData;
	export default {
		data() {
			return {
				timestamp: 0,//剩余时间
				statusList: [{
						icon: 'https://shops.cg500.com/static/aijiu/yr-black.png',
						selectIcon: 'https://shops.cg500.com/static/aijiu/yr-white.png',
						text: '预热中'
					},
					{
						icon: 'https://shops.cg500.com/static/aijiu/gzz-black.png',
						selectIcon: 'https://shops.cg500.com/static/aijiu/gzz-white.png',
						text: '工作中'
					},
					{
						icon: 'https://shops.cg500.com/static/aijiu/lqz-black.png',
						selectIcon: 'https://shops.cg500.com/static/aijiu/lqz-white.png',
						text: '冷却中'
					},
					{
						icon: 'https://shops.cg500.com/static/aijiu/djz-black.png',
						selectIcon: 'https://shops.cg500.com/static/aijiu/djz-white.png',
						text: '待机中'
					}
				],
				currentStatus: 4,//选中
				cusdevice_no: '',//设备编号
				order_id: '',//订单id
				timer: null,//设备信息定时器
				timeData: {},
				wendu: 0,//温度
				useNum: 0,//使用次数
				mANum: 0,//电流
				diwenShow: false,//低温预警是否显示
				setTime: 0,//订单设定时间
				isFirstGet: true,//是否第一次获取订单结束时间
				enterType: 1,//1支付成功跳转 2订单列表 商家设备列表跳转
			}
		},
		onLoad(options) {
			console.log(options,'options')
			
			// this.cusdevice_no = options.cusdeviceNo
			this.order_id = options.orderId
			this.enterType = options.enterType
			// this.order_id = '7'
			// this.cusdevice_no = '0000210202000003'
			if(this.enterType == 2){
				this.getOrderInfo()
			}
			
			this.getEqumentInfo()
			// this.setTime = uni.getStorageSync('setTime') ? uni.getStorageSync('setTime') : 0
			
			this.timer = setInterval(()=>{
				this.getEqumentInfo()
			},30000)
			
		},
		//一般页面用onUnload
		onUnload() {
			if(this.timer) {  
				clearTimeout(this.timer);  
				this.timer = null;  
			}  
		},
		methods: {
			onChange(e) {
			                this.timeData = e
			            },
			toHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getOrderInfo(){
				var _this = this;
					uni.request({
						url: app.post_url + '/aijiu/api.Order/orderInfo',
						data:{
							order_id: this.order_id
						},
						header:{
							'content-type': 'application/json'
						},
						method: 'post',
						success(res) {
							if(res.data.code == 1){
								let end = res.data.data.end_at
								_this.timestamp = end *1000 - Date.now();
								// _this.isFirstGet = false
							}
						},
						fail(res) {
							uni.showToast({
								title: res.data.info,
								icon: 'none'
							})
							
						}
					})
			},
			getEqumentInfo(){
				var _this = this;
					uni.request({
						url: app.post_url + '/aijiu/api.Equipment/lastDataPoint',
						data:{
							// cusdevice_no: this.cusdevice_no
							order_id: this.order_id
						},
						header:{
							'content-type': 'application/json'
						},
						method: 'post',
						success(res) {
							if(res.data.code == 1){
								let list = res.data.data.data.list
								console.log(list,'lsit')
								list.forEach((item)=>{
									if(item.variableName == "设备状态"){
										if(item.value == "258"){
											_this.currentStatus = 4
											_this.diwenShow = true //低温预警显示
										}
									}
									// let timeeee;
									if(item.variableName == "设定运行时间"){
										// _this.setTime = uni.getStorageSync('setTime') ? uni.getStorageSync('setTime') : 0
										// console.log(_this.setTime,item.value,"设定运行时间")
										// if(_this.setTime != item.value && _this.enterType != 2){
										// 	_this.isFirstGet = true
											
										// 	// _this.isFirstGet = uni.getStorageSync('isFirstGet') ? uni.getStorageSync('isFirstGet') : true
										// }
										// // _this.setTime = item.value
										uni.setStorageSync('setTime',item.value)
										_this.setTime = uni.getStorageSync('setTime') ? uni.getStorageSync('setTime') : 0
										console.log(_this.setTime,item.value,"设定运行时间")
									}
									if(item.variableName.includes("设备状态_")){
										
										// console.log(item.variableName.split("设备状态_")[1],'kkkkkk')
										if(item.variableName.split("设备状态_")[1] == "预热中" && item.value == "1"){
											console.log('0000 ',item)
											_this.currentStatus = 0
											uni.removeStorageSync('setTime')
										}else if(item.variableName.split("设备状态_")[1] == "工作中" && item.value == "1"){
											console.log('1111 ',item)
											_this.currentStatus = 1
											// if(_this.isFirstGet){
												_this.getOrderEndTime()
											// }
											
										}else if(item.variableName.split("设备状态_")[1] == "冷却中" && item.value == "1"){
											console.log('2222 ',item)
											_this.currentStatus = 2
											uni.removeStorageSync('setTime')
										}else if(item.variableName.split("设备状态_")[1] == "待机中" && item.value == "1"){
											console.log('3333 ',item)
											_this.currentStatus = 3
											uni.removeStorageSync('setTime')
										}
									}
									if(item.variableName == "温度"){
										_this.wendu = item.value
									}
									if(item.variableName == "使用次数"){
										_this.useNum = item.value
									}
								})
							}else {
								uni.removeStorageSync('setTime')
							}
						},
						fail(res) {
							
							uni.showToast({
								title: res.data.info,
								icon: 'none'
							})
							
						}
					})
				
			},
			getOrderEndTime(){
				var _this = this;
					uni.request({
						url: app.post_url + '/aijiu/api.Order/orderStart',
						data:{
							// cusdevice_no: this.cusdevice_no
							order_id: this.order_id,
							// time_number: this.setTime
							time_number: this.setTime
						},
						header:{
							'content-type': 'application/json'
						},
						method: 'post',
						success(res) {
							console.log(res,'dddddddddddd')
							if(res.data.code == 1){
								let end = res.data.data
								_this.timestamp = end *1000 - Date.now();
								_this.isFirstGet = false
								
							}
						},
						fail(res) {
							
							uni.showToast({
								title: res.data.info,
								icon: 'none'
							})
							
						}
					})
			},
			getEqumentInfoInit(){
				var _this = this;
					uni.request({
						url: app.post_url + '/aijiu/api.Equipment/lastDataPoint',
						data:{
							// cusdevice_no: this.cusdevice_no
							order_id: this.order_id
						},
						header:{
							'content-type': 'application/json'
						},
						method: 'post',
						success(res) {
							if(res.data.code == 1){
								let list = res.data.data.data.list
								console.log(list,'lsit')
								list.forEach((item)=>{
									if(item.variableName == "设备状态"){
										if(item.value == "258"){
											_this.currentStatus = 4
											_this.diwenShow = true //低温预警显示
										}
										// console.log('hahhah ')
										// if(item.value == "13"){
										// 	_this.currentStatus = 0
										// }else if(item.value == "5"){
										// 	_this.currentStatus = 1
										// }else if(item.value == "16"){
										// 	_this.currentStatus = 2
										// }else if(item.value == "32"){
										// 	_this.currentStatus = 3
										// }else if(item.value == "258"){
										// 	_this.currentStatus = 4
										// 	_this.diwenShow = true //低温预警显示
										// }
									}
									if(item.variableName == "设定运行时间"){
										_this.setTime = item.value
									}
									if(item.variableName.includes("设备状态_")){
										
										// console.log(item.variableName.split("设备状态_")[1],'kkkkkk')
										if(item.variableName.split("设备状态_")[1] == "预热中" && item.value == "1"){
											console.log('0000 ',item)
											_this.currentStatus = 0
										}else if(item.variableName.split("设备状态_")[1] == "工作中" && item.value == "1"){
											console.log('1111 ',item)
											_this.currentStatus = 1
											if(_this.isFirstGet){
												_this.getOrderEndTime()
											}
										}else if(item.variableName.split("设备状态_")[1] == "冷却中" && item.value == "1"){
											console.log('2222 ',item)
											_this.currentStatus = 2
										}else if(item.variableName.split("设备状态_")[1] == "待机中" && item.value == "1"){
											console.log('3333 ',item)
											_this.currentStatus = 3
										}
									}
									if(item.variableName == "温度"){
										_this.wendu = item.value
									}
									if(item.variableName == "使用次数"){
										_this.useNum = item.value
									}
									// if(item.variableName == "使用次数"){
									// 	_this.mANum = item.value
									// }
								})
							}
						},
						fail(res) {
							
							uni.showToast({
								title: res.data.info,
								icon: 'none'
							})
							
						}
					})
				
			}
		}
	}
</script>

<style>
	@import "@/common/css/common.css";
	page {
		background-color: #ffffff;
	}

	.mt-29-5 {
		margin-top: 59rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-1-5 {
		margin-left: 3rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.ml-4-5 {
		margin-left: 9rpx;
	}

	.mt-12-5 {
		margin-top: 25rpx;
	}

	.page {
		background-image: linear-gradient(0deg, #fdfbf2 0%, #fdfbf2 12%, #fdfbf2 47%, #ffeee2 73%, #f4d7c0 100%);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 100% 1000rpx;
	}

	.section {
		background-image: linear-gradient(0deg, #fdfbf2 0%, #fdfbf2 12%, #fdfbf2 47%, #ffeee2 73%, #f4d7c0 100%);
		width: 750rpx;
		height: 1624rpx;
	}

	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.pos {
		position: absolute;
		right: 34rpx;
		top: 33rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos_4 {
		position: absolute;
		left: 24rpx;
		top: 108rpx;
	}

	.font {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #a46220;
	}

	.text {
		color: #222222;
		line-height: 34rpx;
	}

	.pos_3 {
		position: absolute;
		left: 50%;
		top: 105rpx;
		transform: translateX(-50%);
	}

	.section_2 {
		padding: 14rpx 27rpx;
		background-color: #ffffffa6;
		border-radius: 32rpx;
		width: 175rpx;
	}

	.pos_2 {
		position: absolute;
		right: 20rpx;
		top: 94rpx;
	}

	.image_3 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.text_2 {
		color: #24170b;
		line-height: 25rpx;
		margin: 0 auto;
	}

	.pos_5 {
		position: absolute;
		left: 50%;
		top: 177rpx;
		transform: translateX(-50%);
	}

	.image_5 {
		filter: drop-shadow(0rpx 0rpx 55.9rpx #ddbaa087);
		width: 514rpx;
		height: 514rpx;
	}

	.pos_7 {
		position: absolute;
		left: 111rpx;
		top: 243rpx;
	}

	.section_3 {
		padding: 64rpx 0 67rpx;
		background-image: url('https://shops.cg500.com/static/aijiu/clock@2x.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 551rpx;
		margin: 0 auto;
	}

	.pos_6 {
		position: absolute;
		left: 50%;
		top: 222rpx;
		transform: translateX(-50%);
	}

	.section_4 {
		padding: 174rpx 48rpx 88rpx 60rpx;
		/* background-image: url('https://ide.code.fun/api/image?token=664daf63602bd2001262c54d&name=5909bb3bf0ea10cfc4302fa4936f6f07.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
	}

	.font_3 {
		font-size: 97rpx;
		font-family: PingFang SC;
		line-height: 76rpx;
		font-weight: 700;
		color: #151515;
	}

	.text_3 {
		margin-left: 8rpx;
	}

	.text_6 {
		margin-left: 18rpx;
		line-height: 54rpx;
	}

	.text_4 {
		margin-left: 11rpx;
		line-height: 75rpx;
	}

	.text_5 {
		margin-left: 7rpx;
	}

	.text_7 {
		color: #151515;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.section_5 {
		padding: 23rpx 0 28rpx;
		background-color: #19150f;
		box-shadow: 0rpx 0rpx 31.16rpx 6.84rpx #ece6dc8c;
		border-radius: 32rpx;
		width: 156rpx;
	}

	.pos_8 {
		position: absolute;
		left: 44rpx;
		top: 819rpx;
	}

	.image_6 {
		width: 55rpx;
		height: 57rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
	}

	.text_8 {
		color: #ffffff;
		line-height: 26rpx;
	}

	.image-wrapper {
		/* padding: 32rpx 0; */
		background-color: #fefefe;
		box-shadow: 0rpx 0rpx 31.16rpx 6.84rpx #ece6dc8c;
		border-radius: 24rpx;
		width: 105rpx;
		height: 105rpx;
		margin-bottom: 20rpx;
	}

	.pos_9 {
		position: absolute;
		left: 254rpx;
		top: 824rpx;
	}

	.image_8 {
		width: 34rpx;
		height: 46rpx;
	}

	.image-wrapper_2 {
		padding: 30rpx 0;
		background-color: #fefefe;
		box-shadow: 0rpx 0rpx 31.16rpx 6.84rpx #ece6dc8c;
		border-radius: 24rpx;
		width: 105rpx;
	}

	.pos_10 {
		position: absolute;
		right: 217rpx;
		top: 824rpx;
	}

	.image_9 {
		height: 42rpx;
		/* width: 42rpx; */
	}

	.image-wrapper_3 {
		padding: 26rpx 0 33rpx;
		background-color: #fefefe;
		box-shadow: 0rpx 0rpx 31.16rpx 6.84rpx #ece6dc8c;
		border-radius: 24rpx;
		width: 105rpx;
	}

	.pos_11 {
		position: absolute;
		right: 50rpx;
		top: 824rpx;
	}

	.image_7 {
		width: 45rpx;
		height: 45rpx;
	}

	.font_5 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #777777;
	}

	.pos_12 {
		position: absolute;
		left: 269rpx;
		bottom: 649rpx;
	}

	.pos_13 {
		position: absolute;
		right: 228rpx;
		bottom: 649rpx;
	}

	.pos_14 {
		position: absolute;
		right: 60rpx;
		bottom: 649rpx;
	}

	.section_6 {
		padding: 45rpx 43rpx 133rpx;
		
		border-radius: 36rpx 36rpx 0rpx 0rpx;
	}

	.pos_15 {
		position: absolute;
		left: 0;
		right: 0;
		top: 1022rpx;
	}

	.text_9 {
		color: #151515;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 29rpx;
	}

	.equal-division {
		align-self: stretch;
		margin-left: 7rpx;
	}

	.section_7 {
		flex: 1 1 206rpx;
	}

	.equal-division-item {
		padding: 30rpx 20rpx;
		background-color: #f5f5f5;
		border-radius: 24rpx;
		height: 146rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		font-weight: 500;
		color: #151515;
	}

	.image_10 {
		width: 36rpx;
		height: 27rpx;
	}

	.text_10 {
		color: #a46220;
		line-height: 26rpx;
	}

	.text_11 {
		color: #a46220;
		line-height: 23rpx;
	}

	.group {
		padding: 0 17rpx;
	}

	.button {
		padding: 14rpx 0 18rpx;
		background-image: linear-gradient(230deg, #d34255 0%, #d6566f 100%);
		border-radius: 12rpx;
	}

	.image_11 {
		width: 31rpx;
		height: 28rpx;
	}

	.text_12 {
		color: #ffffff;
	}

	.button_2 {
		padding: 32rpx 0;
		background-color: #a46220;
		border-radius: 16rpx;
	}

	.text_13 {
		color: #ffffff;
		line-height: 31rpx;
	}

	.status-list {
		width: 680rpx;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}

	.status-list-item {
		width: 25%;
	}
</style>